<template>
  <!-- 车款结算 -->
  <c-main-template minHeight="auto" :isBreadcrumb="false">
    <el-row :gutter="24" class="pd-lg">
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">订单号：</div>
          <el-input
            size="large"
            placeholder="请输入订单号"
            v-model="querys.orderId"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
      <el-col :span="7">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">状态：</div>
          <el-select
            v-model="querys.status"
            size="large"
            class="wh flex-1 mr-lg"
            placeholder="请选择状态"
          >
            <el-option
              v-for="item in carPaymentType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="flex-x-end">
          <el-button size="large" @click="handleReset">重 置</el-button>
          <el-button size="large" type="primary" @click="handleSelect"
            >查 询</el-button
          >
        </div>
      </el-col>
    </el-row>
  </c-main-template>
  <c-main-template
    v-loading="loading"
    class="mt-lg"
    minHeight="auto"
    title="车款结算"
    :isBreadcrumb="false"
  >
    <template #operate>
      <el-button size="large" type="primary" @click="handleBatchRepayment">
        <span>批量结算</span>
      </el-button>
      <el-button size="large" type="primary" @click="handleSettlementRecord">
        <span>结算记录</span>
      </el-button>
    </template>
    <c-table-template
      :data="tableData"
      @selection-change="handleSelectionChange"
      ref="multipleTableRef"
      :row-key="getRowKey"
    >
      <el-table-column
        type="selection"
        align="center"
        width="55"
        :selectable="onCheckSelectable"
        :reserve-selection="true"
      />
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column label="订单号" prop="orderId" align="center" />
      <el-table-column label="车辆信息" prop="productInfo" align="center" />
      <el-table-column
        label="订购数量（辆）"
        prop="productAmount"
        align="center"
      />
      <el-table-column label="订单金额" align="center">
        <template #default="scope">
          {{scope.row.productCurrency}}
          {{ filters.thousands(scope.row.productSumPrice) }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template #default="scope">
          {{ filters.dateYMDHMSFormat(scope.row.timeCreate) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="150">
        <template #default="scope">
          {{ getStatusLabel(carPaymentType, scope.row.status) }}
        </template>
      </el-table-column>
    </c-table-template>
    <div class="table-footer">
      <span>共选择 {{ multiples.length }} 项 , 共计</span>
      <span style="color: rgb(255, 99, 85)"
        >￥{{ filters.thousands(getSumMoney) }}</span
      >
    </div>
    <div class="flex-x-end pd-20">
      <c-page-template
        :total="total"
        :querys="querys"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </c-main-template>
  <c-settlement-form ref="cSettlementFormRef" @change="onPaymentSuccess"/>
  <c-settlement-record ref="cSettlementRecordRef" />
</template>
<script setup>
import { ref, getCurrentInstance, computed } from "vue";
import { useBasicsTable } from "@/hooks/useTable.js";
import { addition } from "@/utils/compute.js";
import { getStatusLabel, carPaymentType } from "@/utils/status.js";
import cSettlementForm from "./components/c-settlement-form.vue";
import cSettlementRecord from "./components/c-settlement-record.vue";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const cSettlementFormRef = ref();
const cSettlementRecordRef = ref();
const multipleTableRef = ref();
const multiples = ref([]);
const getSumMoney = computed(() => {
  return multiples.value.reduce((a, b) => {
    return addition(a, b.productSumPrice);
  }, 0);
});
const getRowKey = (item) => {
  return item.id;
};
const onPaymentSuccess = () => {
  if (multiples.value.length > 0) {
    multiples.value = [];
    multipleTableRef.value.tableRef.clearSelection();
  }
  tableList();
};
const handleSelectionChange = (item) => {
  multiples.value = item;
};
const onCheckSelectable = (item) => {
  if (item.status === 0) {
    // 待结算
    return true;
  }
  return false;
};
const handleBatchRepayment = () => {
  if (multiples.value.length <= 0) {
    ElMessage.warning("请选择批量项");
    return;
  }
  cSettlementFormRef.value.handleOpen(multiples.value);
};
const handleSettlementRecord = () => {
  cSettlementRecordRef.value.handleOpen();
};
const handleReset = () => {
  querys.value = {
    current: 1,
    size: 10,
  };
  if (multiples.value.length > 0) {
    multiples.value = [];
    multipleTableRef.value.tableRef.clearSelection();
  }
  tableList();
};
const {
  querys,
  tableData,
  total,
  loading,
  tableList,
  handleSelect,
  handleSizeChange,
  handleCurrentChange,
} = useBasicsTable({
  url: "/sellerSettle/sellerPage",
});
</script>
<style lang="less" scoped>
.table-footer {
  background: rgb(241, 241, 241);
  color: rgb(32, 32, 32);
  font-size: 14px;
  font-weight: 500;
  border-bottom: var(--el-table-border);
  padding: 12px 16px;
}
</style>